<script lang="ts" setup >
import {onMounted, ref} from 'vue';

// const props = defineProps({urls: Array})
const slideshow = ref<HTMLElement>();
const nextBtn = ref<HTMLElement>();
// 实例类型 ComponentPublicInstance
const preBtn = ref<HTMLElement>();
const urls = ['../assets/images/slidePic1.png','../assets/images/slidePic2.png','../assets/images/slidePic3.png']
const paths = [new URL(`../assets/images/slidePic1.png`, import.meta.url).href,
new URL(`../assets/images/slidePic2.png`, import.meta.url).href,
new URL(`../assets/images/slidePic3.png`, import.meta.url).href]
// urls.map(item => {
//   return new URL(`../assets/images/slidePic1.png`, import.meta.url).href
// })
const info = {
  // 图片总长
  W: 0,
  // 单张图片长度
  w: 0,
  // 图片个数
  n: urls.length
}
// 控制轮播图的开始和结束
let control = {
  run: null,
  stop: null
}
let move = 0;
function init(slide: HTMLElement, time: number, step: number, nextBtn?: HTMLElement, preBtn?: HTMLElement) {
    let last = +new Date();
    const W = slide.offsetWidth;
    const n = urls.length
    const w = W/n;
    info.W = W;
    info.w = w;
    slide.innerHTML += slide.innerHTML;
    slide.style.width = 2 * W + 'px';
    let location = 1;
    let t = null
    // 轮播图动起来
    function run() {
      t = requestAnimationFrame(() => {
        const now = +new Date();
        if(move >= W){
          location = 1;
          move = 0;
          slide.style.transform = `translateX(0px)`;
        }
        if(now - last >= time) {
          move += step
          slide.style.transform = `translateX(-${move}px)`;
          if(move >= location*w){
            location++;
          }
          last = now
        }
        run();
      })
    }
    run();
    // 暂停轮播图
    function stop() {
      cancelAnimationFrame(t);
    }
    const children = slide.childNodes;
    for(let i=0; i<children.length; ++i){
      const Img = children[i];
      Img.addEventListener('mouseover', stop)
      Img.addEventListener('mouseout', run)
    }
    // 下一个图片
    /* function next() {
      if(location === n){
        location = 1
      }else{
        location++;
      }
      left = (location - 1) *w;
      slide.style.transform = `translateX(-${left}px)`;
    } */
    // 上一个图片
   /*  function pre() {
      if(location === 1){
        location = n
      }else{
        location--;
      }
      left = (location - 1) *w;
      slide.style.transform = `translateX(-${left}px)`;
    } */
    // 点击下一个图片
    /* if(nextBtn){
      nextBtn.addEventListener('click', (ev)=> {
        next();
        cancelAnimationFrame(t);
        ev.currentTarget.addEventListener('mouseout', function startRun(e){
          run();
          e.currentTarget.removeEventListener('mouseout', startRun)
        })
      })
    } */
    // 点击上一个图片
    /* if(preBtn){
      preBtn.addEventListener('click', (ev) =>  {
        pre();
        cancelAnimationFrame(t);
        ev.currentTarget.addEventListener('mouseout', function startRun(e){
          console.log(123121)
          run();
          e.currentTarget.removeEventListener('mouseout', startRun)
        })
      })
    }   */ 
    return {
      run,
      stop
    }
}
function clickDot(i, el) {
  move = (i)*(info.w);
  slideshow.value.style.transform = `translateX(-${move}px)`;
  control.stop();
  el.addEventListener('mouseout', function rerun() {
    control.run();
    el.removeEventListener('mouseout', rerun)
  });
}
onMounted(() => {
  control = init(slideshow.value, 200, 20, nextBtn.value, preBtn.value);

})
</script>

<template>
<section class="wrap">
  <!-- <div class="preBtn" ref="preBtn">
    <IconArrowLeft class="btnInner" ></IconArrowLeft>
  </div> -->
  <!-- 轮播图 -->
  <section class="slideshowWrap">
    
    <div class="contain" ref="slideshow">
      <img v-for="(url, index) in paths" :key="index" :src="url" alt="">
    </div>
    
  </section>
  <!-- 下标小圆点 -->
  <ul class="dotWrap">
    <li class="dot" v-for="(item, idx) in urls" :key="idx" @mouseover="clickDot(idx, $el)">{{idx+1}}</li>
  </ul>
  <!-- <div class="nextBtn" ref="nextBtn">
    <IconArrowRight  class="btnInner" ></IconArrowRight>
  </div> -->
</section>
</template>

<style lang="scss" scoped>
.wrap{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.slideshowWrap {
  width: 600px;
  margin: 0 auto;
  height: 300px;
  overflow: hidden;
  position: relative;
  box-shadow: 2px 2px 6px 0px #ccc;
}
.contain {
  &::after{
    content: "";
    display: block;
    clear: both;
  }
  width: 1800px;
}
.contain img{
  width: 600px;
  height: 300px;
  display: block;
  float: left;
}
.btnInner {
  width: 100%;
  height: 100%;
}
.dotWrap{
  display: flex;
  justify-content: center;
}
.dot {
  &:hover{
    color: blue;
    cursor: pointer;
  }
  vertical-align: middle;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
}
</style>
